<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>神臂马良 - 绘你所想</title>
    <link rel="icon" href="src/icon.png" sizes="any" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery-1.8.0.js"></script>
</head>

<body>
    <div id="main">
        <div id="title">
            <img src="./src/title.png">
        </div>
        <div id="content">
            <div id="left">
                <div id="prompt_box" class="block">
                    <input id="prompt_input" title="default" placeholder="画点什么好呢……">
                    <button id="prompt_btn">生成图片</button>
                </div>
                <div id="color_pic" class="img_box block">
                </div>
                <div id="uploader" class="block">
                    <div id="file_container">
                        <button id="file_select_btn">选择文件<input id="file_input" type="file"
                                accept=".jpg,.jpeg,.png"></button>
                        <div id="file_path">未选择文件</div>

                    </div>
                    <button id="upload_btn">上传图片</button>
                    <button id="trans_btn">风格迁移</button>
                </div>
            </div>
            <div id="center">
                <div id="sliders">
                    <div class="sliderbox verticalbox">
                        <div id="blur_title">模糊<br>尺寸</div>
                        <input class="slider vertical" id="blur" type="range" min="1" max="15" value="3" step="2" />
                        <div id="blur_value">3</div>
                    </div>
                    <div class="sliderbox verticalbox">
                        <div id="gate_title">细节<br>门限</div>
                        <input class="slider vertical" id="gate" type="range" min="0" max="200" value="100" step="10" />
                        <div id="gate_value">100</div>
                    </div>
                </div>
                <button id="vect_btn" class="ctrl_btn">
                    指令生成
                </button>
                <button id="run_pause_btn" class="ctrl_btn">
                    启动
                </button>
                <button id="stop_btn" class="ctrl_btn">
                    停止
                </button>
                <div id="height_tune">
                    <p>高度微调</p>
                    <button id="up_btn" class="ctrl_btn">↑</button>
                    <button id="down_btn" class="ctrl_btn">↓</button>
                </div>
            </div>
            <div id="right">
                <div id="title_right" class="block">
                    <div id="title_picbox"><img src="./src/title.png"></div>
                    <div id="title_text"> 神臂马良 绘你所想</div>
                </div>
                <div id="line_pic" class="img_box block">
                </div>
                <div id="bottom_set1" class="bottom_set">
                    <div id="sliders_b">
                        <div class="sliderbox horizontalbox">
                            <div id="blur_b_title">模糊尺寸</div>
                            <input class="slider" id="blur_b" type="range" min="1" max="15" value="3" step="2" />
                            <div id="blur_b_value">3</div>
                        </div>
                        <div class="sliderbox horizontalbox">
                            <div id="gate_b_title">细节门限</div>
                            <input class="slider" id="gate_b" type="range" min="0" max="200" value="100" step="10" />
                            <div id="gate_b_value">100</div>
                        </div>
                    </div>
                    <button id="vect_btn_b" class="ctrl_btn">
                        指令<p>生成
                    </button>
                </div>
                <div id="bottom_set2" class="bottom_set">
                    <p>高度微调</p>
                    <div id="height_tune_b">
                        <button id="up_btn_b" class="ctrl_btn">↑</button>
                        <button id="down_btn_b" class="ctrl_btn">↓</button>
                    </div>
                    <div id="bottom_set3">
                        <button id="run_pause_btn_b" class="ctrl_btn">
                            启动
                        </button>
                        <button id="stop_btn_b" class="ctrl_btn">
                            停止
                        </button>
                    </div>
                </div>
                <div id="status" class="block">
                    机械臂状态：空闲
                </div>
            </div>
        </div>
        <div id="footer">
            @神臂马良 绘你所想
        </div>
    </div>
    <div id="per" class="blur">
        <div class="circle-bar">
            <div class="circle-bar-left"></div>
            <div class="circle-bar-right"></div>
            <!-- 遮罩层，显示百分比 -->
            <span id="percent_num" class="percent">0%</span>
        </div>
    </div>
</body>
<script src="main.js"></script>

</html>